(function (window, undefined) {
    class Snake {
        constructor({ width = 20, height = 20, direction = "right" }) {
            this.width = width
            this.height = height


            this.eles = [
                { left: 3, top: 1, color: "red" },
                { left: 2, top: 1, color: "blue" },
                { left: 1, top: 1, color: "blue" }
            ]
            
            this.direction = direction

            this.snakes = []
        };
        render(parent) {
            for (let i = 0; i < this.eles.length; i++) {
                const ele = document.createElement("div")
                ele.style.position = "absolute"

                
                ele.style.top = this.eles[i].top * this.height + "px"
                ele.style.left = this.eles[i].left * this.width + "px"

                ele.style.width = this.width + "px"
                ele.style.height = this.height + "px"

                ele.style.backgroundColor = this.eles[i].color

                this.snakes.push(ele)
                parent.appendChild(this.snakes[i])

                // console.log(this.snakes);

            }
        };
        moveSnake() {
            for (let i = this.eles.length - 1; i > 0; i--) {
                this.eles[i].left = this.eles[i - 1].left
                this.eles[i].top = this.eles[i - 1].top
            }
            const head = this.eles[0]
            switch (this.direction) {
                case "left":
                    head.left -= 1
                    break;
                case "top":
                    head.top -= 1
                    break;
                case "right":
                    head.left += 1
                    break;
                case "bottom":
                    head.top += 1
                    break;

            }
        };
        removeSnake(parent) {
            for (let i = this.snakes.length - 1 ; i >= 0; i--) {
                // console.log(parent.children[i]);
                parent.removeChild(this.snakes[i])
                this.snakes.pop()
                
            }
        };
    }
    window.Snake = Snake
})(window, undefined)